import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Layout from '../views/Layout/index.vue'
import jwt_decode from 'jwt-decode';


Vue.use(VueRouter)

// hidden: 表示是否需要在左侧菜单显示
export const asyncRouterMap = [
  {
    path: "/",
    name: "dashboard",
    component: Layout,
    hidden: true,
    redirect: "/home",
    children: [
      {
        path: "/home",
        name: "home",
        meta: {
          title: "首页",
          icon: "el-icon-menu"
        },
        component: () => import("@/views/Home.vue")
      }
    ]
  },
  {
    path: "/dataManage",
    hidden: true,
    meta: {
      title: "数据管理",
      icon: "el-icon-coin"
    },
    name: "dataManage",
    component: Layout,
    redirect: "/tableData",
    children: [
      {
        path: "/tableData",
        name: "tableData",
        meta: {
          title: "表格管理",
          icon: "el-icon-s-order"
        },
        component: () => import("@/views/DataManage/TableData.vue")
      },
      {
        path: "/chartsData",
        name: "chartsData",
        meta: {
          title: "图表管理",
          icon: "el-icon-data-line"
        },
        component: () => import("@/views/DataManage/ChartsData.vue")
      },
      {
        path: "/formData",
        name: "formData",
        meta: {
          title: "表单管理",
          icon: "el-icon-tickets",
          roles:["admin","editor"]
        },
        component: () => import("@/views/DataManage/FormData.vue")
      },
    ]
  },
  {
    path: "/userManage",
    name: "userManage",
    component: Layout,
    hidden: true,
    redirect: "/accountData",
    children: [
      {
        path: "/accountData",
        name: "accountData",
        meta: {
          title: "账户管理",
          icon: "el-icon-user",
          roles:["admin"]
        },
        component: () => import("@/views/UserManage/AccountData.vue")
      },
    ]
  },
  {
    path: '/user',
    component: Layout,
    redirect: '/userInfo',
    hidden: false,
    children: [
      {
        path: '/userInfo',
        name: 'userInfo',
        meta: {
          title: "个人中心",
        },
        component: () => import('@/views/UserManage/UserInfo.vue')
      }
    ]
  },
  {
    path: '/404',
    name: '404',
    hidden: false,
    meta: {
      title: "404",
    },
    component: () => import('@/views/404.vue')
  },
  {
    path: "*",
    redirect: "/404"
  },
  {
    path: "/login",
    name: "login",
    hidden: false,
    meta: {
      title: "系统登录",
    },
    component: () => import("@/views/Login/Login.vue")
  },
  {
    path: "/password",
    name: "password",
    hidden: false,
    meta: {
      title: "找回密码",
    },
    component: () => import("@/views/Login/Password.vue")
  }
]

const router: any = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: asyncRouterMap
})

router.beforeEach((to: any, from: any, next: any) => {
  const isLogin = localStorage.token? true : false
  if(to.path === "/login" || to.path === "/password") {
    next()
  } else {
    if(isLogin) {
      const decoded:any = jwt_decode(localStorage.token)
      const {key} = decoded
      if(hasPermission(key,to)) {
        next()
      } else {
        next("/404") // 无权限进入页面
      }
    } else {
      next("/login")
    }
    // isLogin ? next() : next("/login")
  }
})

function hasPermission(roles:string,route:any) {
  if(route.meta && route.meta.roles) {
    return route.meta.roles.some((role:string) => role.indexOf(roles) >= 0)
  } else {
    return true
  }
}

export default router
